<template>
  <view class="job-list-page">
    <!-- 顶部导航栏 -->
    <view class="header-nav">
      <view class="nav-content">
        <text class="nav-title">职位</text>
        <view class="nav-actions">
          <text class="iconfont-v2 icon-gengduo action-icon"></text>
          <text class="iconfont-v2 icon-xiaoxi action-icon"></text>
        </view>
      </view>
    </view>

    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view class="filter-btn" @click="showFilter">
        <text>筛选</text>
        <text class="iconfont-v2 icon-xiala filter-icon"></text>
      </view>
    </view>

    <!-- 职位列表 -->
    <view class="job-list">
      <view 
        class="job-card" 
        v-for="(job, index) in jobList" 
        :key="index"
        @click="goJobDetail(job)"
      >
        <view class="job-header">
          <text class="job-title">{{ job.title }}</text>
          <view class="delete-btn" @click.stop="deleteJob(job, index)">
            <text>删除</text>
          </view>
        </view>
        
        <view class="job-tags">
          <text class="tag" v-for="tag in job.tags" :key="tag">{{ tag }}</text>
        </view>
        
        <view class="job-details">
          <view class="detail-item">
            <text class="detail-label">发布时间:</text>
            <text class="detail-value">{{ job.publishTime }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">上班地址:</text>
            <text class="detail-value">{{ job.address }}</text>
          </view>
        </view>
        
        <view class="job-footer">
          <text class="job-salary">{{ job.salary }}</text>
          <text class="consult-count">{{ job.consultCount }}人咨询</text>
        </view>
      </view>
    </view>

    <!-- 筛选弹窗 -->
    <view class="filter-modal" v-if="showFilterModal" @click="hideFilter">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">筛选条件</text>
          <text class="iconfont-v2 icon-guanbi close-btn" @click="hideFilter"></text>
        </view>
        
        <view class="filter-options">
          <view class="filter-section">
            <text class="section-title">薪资范围</text>
            <view class="option-list">
              <view 
                class="option-item" 
                v-for="(option, index) in salaryOptions" 
                :key="index"
                :class="{ active: selectedSalary === index }"
                @click="selectSalary(index)"
              >
                <text>{{ option }}</text>
              </view>
            </view>
          </view>
          
          <view class="filter-section">
            <text class="section-title">工作地点</text>
            <view class="option-list">
              <view 
                class="option-item" 
                v-for="(option, index) in locationOptions" 
                :key="index"
                :class="{ active: selectedLocation === index }"
                @click="selectLocation(index)"
              >
                <text>{{ option }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <view class="modal-footer">
          <button class="reset-btn" @click="resetFilter">重置</button>
          <button class="confirm-btn" @click="confirmFilter">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showFilterModal: false,
      selectedSalary: -1,
      selectedLocation: -1,
      salaryOptions: ["不限", "3000-5000", "5000-8000", "8000-12000", "12000以上"],
      locationOptions: ["不限", "青秀区", "西乡塘区", "兴宁区", "江南区"],
      jobList: [
        {
          id: 1,
          title: "彩票店收银员",
          salary: "5000-12000/月",
          tags: ["1-3年", "学历不限", "设计软件", "设计师"],
          publishTime: "2025-10-17 12:00",
          address: "西乡塘区·衡阳路",
          consultCount: 5
        },
        {
          id: 2,
          title: "彩票店收银员",
          salary: "5000-12000/月",
          tags: ["1-3年", "学历不限", "设计软件", "设计师"],
          publishTime: "2025-10-17 12:00",
          address: "西乡塘区·衡阳路",
          consultCount: 5
        },
        {
          id: 3,
          title: "兼职客服在线解答",
          salary: "3000-6000/月",
          tags: ["经验不限", "大专", "客服", "在线"],
          publishTime: "2025-10-16 14:30",
          address: "青秀区·民族大道",
          consultCount: 8
        },
        {
          id: 4,
          title: "周末兼职配送员",
          salary: "200-300/天",
          tags: ["经验不限", "学历不限", "配送", "周末"],
          publishTime: "2025-10-15 09:15",
          address: "兴宁区·朝阳路",
          consultCount: 12
        }
      ]
    }
  },
  methods: {
    showFilter() {
      this.showFilterModal = true;
    },
    hideFilter() {
      this.showFilterModal = false;
    },
    selectSalary(index) {
      this.selectedSalary = index;
    },
    selectLocation(index) {
      this.selectedLocation = index;
    },
    resetFilter() {
      this.selectedSalary = -1;
      this.selectedLocation = -1;
    },
    confirmFilter() {
      uni.showToast({
        title: "筛选条件已应用",
        icon: "success"
      });
      this.hideFilter();
    },
    goJobDetail(job) {
      uni.navigateTo({
        url: `/pages/fast/job-detail?id=${job.id}`
      });
    },
    deleteJob(job, index) {
      uni.showModal({
        title: "确认删除",
        content: `确定要删除"${job.title}"这个职位吗？`,
        success: (res) => {
          if (res.confirm) {
            this.jobList.splice(index, 1);
            uni.showToast({
              title: "删除成功",
              icon: "success"
            });
          }
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.job-list-page {
  min-height: 100vh;
  background: #f5f5f5;
}

/* 顶部导航栏 */
.header-nav {
  background: #ED6567;
  padding: 20rpx 30rpx;
  padding-top: calc(20rpx + env(safe-area-inset-top));
  
  .nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .nav-title {
      font-size: 36rpx;
      font-weight: 600;
      color: white;
    }
    
    .nav-actions {
      display: flex;
      gap: 20rpx;
      
      .action-icon {
        font-size: 32rpx;
        color: white;
      }
    }
  }
}

/* 筛选栏 */
.filter-bar {
  background: white;
  padding: 20rpx 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
  
  .filter-btn {
    display: flex;
    align-items: center;
    gap: 8rpx;
    color: #666;
    font-size: 28rpx;
    cursor: pointer;
    
    .filter-icon {
      font-size: 20rpx;
    }
  }
}

/* 职位列表 */
.job-list {
  padding: 20rpx;
  
  .job-card {
    background: white;
    border-radius: 24rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-4rpx);
      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
    }
    
    .job-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 20rpx;
      
      .job-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        flex: 1;
        line-height: 1.4;
      }
      
      .delete-btn {
        background: #ffebee;
        color: #ED6567;
        padding: 8rpx 16rpx;
        border-radius: 20rpx;
        font-size: 24rpx;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
          background: #ffcdd2;
        }
      }
    }
    
    .job-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 12rpx;
      margin-bottom: 20rpx;
      
      .tag {
        background: #f0f0f0;
        color: #666;
        padding: 6rpx 16rpx;
        border-radius: 20rpx;
        font-size: 24rpx;
      }
    }
    
    .job-details {
      margin-bottom: 20rpx;
      
      .detail-item {
        display: flex;
        margin-bottom: 8rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .detail-label {
          font-size: 26rpx;
          color: #666;
          margin-right: 16rpx;
          min-width: 120rpx;
        }
        
        .detail-value {
          font-size: 26rpx;
          color: #333;
          flex: 1;
        }
      }
    }
    
    .job-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .job-salary {
        font-size: 32rpx;
        font-weight: 600;
        color: #ED6567;
      }
      
      .consult-count {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

/* 筛选弹窗 */
.filter-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  
  .modal-content {
    background: white;
    width: 100%;
    max-height: 80vh;
    border-radius: 24rpx 24rpx 0 0;
    display: flex;
    flex-direction: column;
    
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 2rpx solid #f0f0f0;
      
      .modal-title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
      }
      
      .close-btn {
        font-size: 32rpx;
        color: #999;
        cursor: pointer;
      }
    }
    
    .filter-options {
      flex: 1;
      padding: 30rpx;
      overflow-y: auto;
      
      .filter-section {
        margin-bottom: 40rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .section-title {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 20rpx;
          display: block;
        }
        
        .option-list {
          display: flex;
          flex-wrap: wrap;
          gap: 16rpx;
          
          .option-item {
            background: #f8f9fa;
            color: #666;
            padding: 16rpx 24rpx;
            border-radius: 30rpx;
            font-size: 26rpx;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2rpx solid transparent;
            
            &.active {
              background: #fff5f5;
              color: #ED6567;
              border-color: #ED6567;
            }
          }
        }
      }
    }
    
    .modal-footer {
      display: flex;
      gap: 20rpx;
      padding: 30rpx;
      border-top: 2rpx solid #f0f0f0;
      
      .reset-btn {
        flex: 1;
        background: #f8f9fa;
        color: #666;
        border: none;
        border-radius: 50rpx;
        padding: 24rpx;
        font-size: 28rpx;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
          background: #e9ecef;
        }
      }
      
      .confirm-btn {
        flex: 1;
        background: #ED6567;
        color: white;
        border: none;
        border-radius: 50rpx;
        padding: 24rpx;
        font-size: 28rpx;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
          background: #d55a54;
        }
      }
    }
  }
}
</style>
